<!--项目台账-->
<template>
  <div class="projectLedger">
    <el-tabs v-model="activeName">
      <el-tab-pane label="在建项目" name="first">
        <el-row class="top-card">
          <el-col :span="8" style="margin-right: 15px;">
            <el-card class="box-card">
              <div class="top-card" @click="showTables({  value: 'zjxm',name:'项目类型状态统计-负责项目(4)条',columns: zjxmColumn,tableData: zjxmData,showButton: true,showQuery: true})">
                <div class="top-icon"><i class="el-icon-s-order"></i></div>
                <div>
                  <div class="top-num">4</div>
                  <div class="top-font">在建项目</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" style="margin-right: 15px;">
            <el-card class="box-card">
              <div class="top-card" @click="showTables({  value: 'zjxm',name:'项目类型状态统计-负责项目(4)条',columns: zjxmColumn,tableData: zjxmData,showButton: true,showQuery: true})" >
                <div class="top-icon"><i class="el-icon-s-order"></i></div>
                <div>
                  <div class="top-num">0</div>
                  <div class="top-font">延期项目</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div class="top-card" @click="showTables({  value: 'zjxm',name:'项目类型状态统计-负责项目(4)条',columns: zjxmColumn,tableData: zjxmData,showButton: true,showQuery: true})">
                <div class="top-icon"><i class="el-icon-s-order"></i></div>
                <div>
                  <div class="top-num">0</div>
                  <div class="top-font">暂停项目</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <ledger-table style="margin-top: 20px" @showFormModal="showFormModal" @showModal="showModal"></ledger-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="完结项目" name="second">
        <ledger-table status="com" @showModal="showModal"></ledger-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="modalTitle" :visible.sync="modalState" @close="closeModal" :width="modalWidth" :close-on-click-modal="false">
      <el-image class="cust-modal-bgi" :src="modalPic" v-if="modalType=='img'"></el-image>
      <table-dialog :modalRow="modalRow" v-if="modalType=='table'"></table-dialog>
      <quick-dialog :modalRow="modalRow" v-if="modalType=='form'"></quick-dialog>
    </el-dialog>
  </div>
</template>

<script>
import LedgerTable from "@/views/integrated/components/ledgerTable";
import TableDialog from "@/views/leader/components/tableDialog";
import QuickDialog from "@/views/leader/components/quickDialog";
export default {
  name: "projectLedger",
  components: {QuickDialog, TableDialog, LedgerTable},
  data(){
    return {
      modalTitle:'',
      modalState:false,
      modalWidth:'',
      activeName:'first',
      modalType:'',
      modalRow:{},
      zjxmColumn:[
        { prop: 'xmlx', label: '项目类型', align: 'center',fixed:'left'},
        { prop: 'zjxm', label: '在建项目', align: 'center'},
        { prop: 'ztxm', label: '暂停项目', align: 'center'},
        { prop: 'zzxm', label: '终止项目', align: 'center'},
        { prop: 'wcxm', label: '完成项目', align: 'center'},
        { prop: 'fzxmzs', label: '负责项目总数', align: 'center'},
        { prop: 'zjyq', label: '其中：在建延期项目', align: 'center'},
      ],
      zjxmData:[
        {xmlx:'防沙治沙',fzxmzs:'9',zjxm:'0',zzxm:'3',ztxm:"1",wcxm:'5',zjyq:'0'},
        {xmlx:'植树造林',fzxmzs:'4',zjxm:'1',zzxm:'3',ztxm:"0",wcxm:'0',zjyq:'0'},
        {xmlx:'绿化改造',fzxmzs:'12',zjxm:'1',zzxm:'8',ztxm:"1",wcxm:'2',zjyq:'0'},
        {xmlx:'机器人造林',fzxmzs:'6',zjxm:'0',zzxm:'5',ztxm:"1",wcxm:'0',zjyq:'0'},
      ],
      modalPic:''
    }
  },
  mounted() {
  },
  methods:{
    closeModal(){
      this.modalState = false
    },
    handleClick(value){
      this.modalState = true
      this.modalPic = require(`./images/${value}.png` );
    },
    showModal(data){
      this.modalType = 'img'
      this.modalState = true
      this.modalPic = data.image
      this.modalWidth = '70%'
    },
    //打开table-dialog组件
    showTables(data){
      this.modalState = true
      this.modalTitle = data.name
      this.modalRow = data
      this.modalType = 'table'
      this.modalWidth = '70%'
    },
    //打开quick-dialog组件
    showFormModal(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'form'
      this.modalWidth = '80%'
    },
  }
}
</script>

<style scoped>
.projectLedger{
  margin: 16px;
}
.box-card {
  width: 100%;
  height: 80px ;
}
.box-card:focus,
.box-card:hover{
  border-color: #a0ddcd;
  cursor: pointer;
}
.top-card {
  display: flex;
  justify-content: space-around;
}
.top-num{
  text-align: center;
  font-size: 24px;
  color: #11A983;
}
.top-font{
   font-size: 12px;
}
.top-icon{
  color: #11A983;
  font-size: 45px;
}
</style>

